<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .display {
            display: inline-block;
        }
        .center{
            text-align: center;
            position: relative;
            transform: translate(-70px);
        }
        .box{
            width: 55vw;
            margin: 8vh auto;
        }
        .content{
            width: 50vw;
            margin: 0 auto;
        }
        .title{
            font-size: 1.2rem;
            line-height: 5rem;
            position: relative;
        }
        .box img{
            width: 3rem;
            vertical-align: middle;
        }
        .password{
            position: absolute;
            right: 13vw;
            font-size: 1rem;
            color: blue;
        }
        .hint{
            text-align: center;
            font-size: 0.8rem;
            color: blue;
        }
        .layui-form-item .icon{
            width: 0.9rem;
            vertical-align: middle;
            text-align: left;
            position: relative;
            bottom: -10px;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="title">
        <img src="/images/personal.png" >
        <span >个人中心</span>
        <a href="javascript:void(0)" class="password">修改密码</a>
    </div>

    <div class="content">
        <form class="layui-form" lay-filter="example" id="staffInfo">
            <div class="layui-form-item display">
                <label class="layui-form-label">工号</label>
                <div class="layui-input-inline">
                    <input type="text" name="id"  disabled lay-verify="required|number" placeholder="工号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="realName"  lay-verify="required|realName" placeholder="姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName"  lay-verify="required|userName" placeholder="4~10位英文" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline display " >
                    <select name="deptId"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">部门</option>
                        <option value="1">总经办</option>
                        <option value="2">财务部</option>
                        <option value="3">业务部</option>
                        <option value="4">技术部</option>
                        <option value="5">人事部</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">职务</label>
                <div class="layui-input-inline display " >
                    <select name="roleId"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">职务</option>
                        <option value="1">总经理</option>
                        <option value="2">主管</option>
                        <option value="3">普通职员</option>
                        <option value="4">人事专员</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item  display ">
                <label class="layui-form-label  ">性别</label>
                <div class="layui-input-inline ">
                    <input type="radio" name="gender" value="1" title="男">
                    <input type="radio" name="gender" value="0" title="女" >
                </div>
            </div>

            <div class="layui-form-item display">
                <label class="layui-form-label">政治面貌</label>
                <div class="layui-input-inline display " >
                    <select name="political"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">政治面貌</option>
                        <option value="1">党员</option>
                        <option value="2">团员</option>
                        <option value="3">群众</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">学历</label>
                <div class="layui-input-inline display " >
                    <select name="education"  lay-filter="roleId_search" lay-search lay-verify="required">
                        <option value="">学历</option>
                        <option value="1">本科及以上</option>
                        <option value="2">大专</option>
                        <option value="3">高中及以下</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                    <input type="text" name="idcard"  lay-verify="identity|required" placeholder="身份证号" autocomplete="off" class="layui-input" maxlength="18">
                </div>
            </div>


            <div class="layui-form-item display">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline display " >
                    <input type="text" class="layui-input test-item" name="birthday" lay-verify="date|required" placeholder="选择日期">
                </div>
            </div>
            <div class="layui-form-item display">
                <label class="layui-form-label">入职日期</label>
                <div class="layui-input-inline display " >
                    <input type="text" class="layui-input test-item" lay-verify="date|required" name="hireDate" placeholder="选择日期">
                </div>
            </div>

            <div class="layui-form-item center">
                <div class="layui-input-block ">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" >保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary" lay-filter="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>

    //员工id
    var id=parent.id;
    //员工对象
    var staff=parent.staff;
    /*表格数据*/
    layui.use([ 'form', 'layer','laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,laydate=layui.laydate
            , $ = layui.$;

        //执行一个laydate实例
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

        //获取职务数据
        // getRole();
        //获取部门数据
        // getDept();
        form.render();

        /*获取职务数据*/
        function getRole(){

            $.post(
                "/s/getRole",{},function (res) {

                    //遍历
                    if(res.success=="true"){
                        var roleVoList =res.data;

                        for (var i = 0; i < roleVoList.length; i++) {

                            //创建新的option
                            var $new_option=$("<option></option>");
                            //将option添加到职务下拉框
                            $("[name='roleId']").append($new_option);
                            $new_option.val(roleVoList[i].id);
                            $new_option.html(roleVoList[i].name);
                            form.render();//更新全部
                        }

                    }
                }
            )
        }

        /*获取部门数据*/
        function getDept(){
            $.post(
                "/s/getDept",{},function (res) {

                    //遍历
                    if(res.success=="true"){
                        var deptList =res.data;

                        for (var i = 0; i < deptList.length; i++) {

                            //创建新的option
                            var $new_option=$("<option></option>");
                            //将option添加到职务下拉框
                            $("[name='deptId']").append($new_option);
                            $new_option.val(deptList[i].id);
                            $new_option.html(deptList[i].name);
                            form.render();//更新全部
                        }

                    }
                }
            )
        }

        //为表单赋值
        form.val('example',{
            'id': staff.id
            ,'realName': staff.realName
            ,'userName': staff.userName
            ,'gender':staff.gender
            ,'state':staff.state
            ,'roleId':staff.roleId
            ,'deptId':staff.deptId
            ,'birthday':staff.birthday
            ,'hireDate':staff.hireDate
            ,'idcard':staff.idcard
            ,'education':staff.education
            ,'political':staff.political
        });

        //更新表单数据
        form.render();

        /*验证姓名*/
        /*验证姓名*/
        form.verify({
            realName: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[\u4e00-\u9fa5A-Za-z]+$").test(value) ) {
                    return '姓名必须为汉字或英文!';
                }

            }
        });

        /*验证用户名*/
        form.verify({
            userName: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[A-Za-z]{4,10}$").test(value)) {
                    return '用户名必须为英文，不限大小写!';
                }

            }
        });

        /* 保存按钮 */
        form.on('submit(formDemo)',function (data) {
            $.post(
                //修改员工信息
                "/s/modify",form.val("example"),function (res) {
                    layer.open({
                        type: 0
                        ,title: '提示'
                        ,content: res.msg
                        ,success:function (layero,index) {
                            indexo=index;
                            form.render();
                        }
                    });
                }

            )
            return false;
        });
        /* 重置按钮 */
        form.on('submit(reset)', function(){
            form.reset();
            return false; //阻止表单跳转
        });

        /*为修改密码绑定单击事件*/
        $(".password").on("click",function () {

            modifyPassword(id);
        });


        function modifyPassword(data){
            /*弹出层*/
            var pwd= layer.open({
                type: 1
                ,area: ['380px','380px']
                ,title: '修改密码'
                ,content: $('#newDiv').html()
                ,success:function (layero,index) {

                    form.val('modifyPwd',{
                        'id': data
                    });

                    form.render();
                    indexo=index;
                }
            });

            /*验证新密码*/
            function checkPassword(){

                //验证密码格式是否符合要求:密码长度为6~18位，至少包含1位字母、1位数字
                //获取新密码框的值
                var newPassword=$("[name='newPassword']").val();

                //判断密码格式是否符合要求
                if(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(newPassword)){
                    $("[name='newPassword']").parent().next().attr("src","/images/success.png");
                    return true;
                }else {
                    $("[name='newPassword']").parent().next().attr("src","/images/error.png");
                    layer.alert("请正确填写新密码!");
                    return false;
                }

            }

            /*为密码文本框设置聚集失焦事件*/
            $(" [name='newPassword']").on("focus",function (){
                $(this).parent().next().attr("src","");

            }).on("blur",function (){
                checkPassword();
            });

            /*二次验证密码*/
            function checkNewPwd(){
                //获取新密码框的值
                var newPassword=$("[name='newPassword']").val();
                //获取确认密码框的值
                var newPwd=$("[name='newPwd']").val();

                if(newPwd!=newPassword){
                    $("[name='newPwd']").parent().next().attr("src","/images/error.png");
                    layer.alert("两次密码输入不一致!");
                    return false;
                }else{
                    $("[name='newPwd']").parent().next().attr("src","/images/success.png");
                    return true;
                }

            }
            /*为二次验证密码文本框设置聚集失焦事件*/
            $(" [name='newPwd']").on("focus",function (){
                $(this).parent().next().attr("src","");
            }).on("blur",function (){
                checkNewPwd();
            });

            /*总表单验证*/
            function checkForm(){

                //声明验证函数名数组
                var checkArr = [
                    "checkPassword()"
                    , "checkNewPwd()"
                ];

                //绑定验证函数
                /* 逐一执行验证函数, 统计验证结果 */
                var count = 0; //计数器, 统计true的个数
                //遍历checkArr
                for (var i = 0; i < checkArr.length; i++) {
                    //执行下标i的函数
                    var res = eval(checkArr[i]);

                    //判断, 验证结果
                    if (res){
                        count++;
                    }
                }

                /* 根据统计结果判断, 返回true或false */
                if(count == checkArr.length) return true;

                return false;
            }

            /*修改密码*/
            //触发事件
            form.on('submit(modifyPwd)',function () {
                /*判断总表单验证是否通过*/
                if(checkForm()){
                    $.post(

                        //修改密码
                        "/s/modifyPassword",form.val("modifyPwd"),function (res) {
                            layer.alert(res.msg);
                            //关闭修改密码的弹框
                            layer.close(pwd)
                        }
                    )
                    return false;
                }else {
                    layer.alert("请正确填写新密码与确认密码!");
                    return false;
                }
            });

        }

    });

</script>
<script type="text/html" id="newDiv">
    <form class="layui-form" lay-filter="modifyPwd" id="modifyPwd">
        <div class="layui-form-item display">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-inline">
                <input type="text" name="id" disabled  lay-verify="required" placeholder="工号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password"  lay-verify="required" placeholder="旧密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input type="password" name="newPassword"  lay-verify="required" placeholder="新密码" autocomplete="off" class="layui-input display" maxlength="18">
            </div>
            <img src="" class="icon ">
        </div>
        <div class="layui-form-item ">
            <div class="hint">注：密码长度为6~18位，至少包含字母、数字各1位</div>
        </div>
        <div class="layui-form-item display">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="newPwd"  lay-verify="required" placeholder="确认密码" autocomplete="off" class="layui-input display" maxlength="18">
            </div>
            <img src="" class="icon ">
        </div>

        <div class="layui-form-item center">
            <div class="layui-input-block ">
                <button class="layui-btn" lay-submit lay-filter="modifyPwd" >保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</script>
<script>


</script>
</html>